<script setup lang="ts">
  import { defineOptions ,reactive,onMounted} from 'vue';
  import { useRouter } from 'vue-router';
  defineOptions({
    
  })

  let router=useRouter();

  const onGoPage=(data:string,hash:string)=>{
    router.push({
      path:data,
      query:{
        hash:hash
      }
    })
  }
</script>

<template>
  <div class="footertopbox">
    <div class="footertopbodybox">
      <div class="logobox">
        <img src="@/assets/logo.png" alt="">
      </div>
      <ul class="footertoplistgroup">
        <li>
          <a href="/home">
            Home
          </a>
          <ul>
            <li>
              <a href="/home#page2">Trading Partner</a>
            </li>
            <li>
              <a href="/home#page3">Trading Products</a>
            </li>
            <li>
              <a href="/home#page4">Advanced Trading Platform</a>
            </li>
            <li>
              <a href="/home#page5">Online Trading Data</a>
            </li>
          </ul>
        </li>
        <li>
          <a href="/mt5/desktop">
            Trading Tools
          </a>
          <ul>
            <li>
              <a href="/mt5/desktop#advantages">MT5</a>
            </li>
            
            <li>
              <a href="/mt5/desktop#webtrader">Market Analysis</a>
            </li>
            <li>
              <a href="/mt5/desktop#downloadapp">
                Download
              </a>
            </li>
          </ul>
        </li>
        <!-- <li>
          <a href="/news">
            Learning Center
          </a>
        </li> -->
        <li>
          <a href="/about">
            About Us
          </a>
          <ul>
            <li>
              <a href="/about#companyprofile">
                Company Profile
              </a>
            </li>
            <li>
              <a href="/about#advantage">
                Advantage
              </a>
            </li>
            <li>
              <a href="/about#corporateculture">
                Corporate Culture
              </a>
            </li>
            <li>
              <a href="/about#contactus">
                Contact Us
              </a>
            </li>
          </ul>
        </li>
      </ul>
    </div>
  </div>
  <div class="footerbottombox">
    <div>
      <p class="desc">
        <span> GMG Full Disclosure Orders</span>is registered in Comoros, with Registration Number 15971, holding an International Brokerage Clearing House License with License ID L15971/GMG.&nbsp;The registration address is at Hamchako, Mutsamudu, Autonomous Island of Anjouan, Union of the Comoros.&nbsp;The  operational office is located in Hong Kong, with address at Unit B28, 12F, Fou Wah Industrial Building, No. 10-16 Pun Shan Stree, Tsuen Wan, Hong Kong.
      </p>
      <p class="desc"><span>Email:&nbsp;&nbsp;</span>info@fortgateoffshore.com</p>
      <p class="desc"><span>Landline:&nbsp;&nbsp;</span>+4407527089165</p>
      <p class="desc"><span>Disclaimer:&nbsp;&nbsp;</span>The information provided on this website is general in nature only and does not constitute personal financial advice.&nbsp;The website is not intended to offer investment services to citizens of certain jurisdictions such as the UK, USA, Canada, and FATF-listed countries including, among others, Iran, North Korea, Cuba, Syria, Belarus, Myanmar (Burma), Russia, South Sudan, Venezuela, and Yemen; or to any person in any country or jurisdiction where such distribution or use would be contrary to local law or regulation.</p>
      <p class="desc"><span>Risk Disclosure:&nbsp;&nbsp;</span>Investing in CFDs and Margin FX Contracts carries significant risks and is not suitable for all investors. You don’t own, or have, any interest in the underlying assets.&nbsp;69% of retail investor accounts lose money when trading CFDs.&nbsp;You should consider whether you understand how CFDs work and whether you can afford to take the high risk of losing your money. </p>
      <p class="desc">Copyright © GrowthMaxGlobal 2025. All rights reserved.  </p>
    </div>
  </div>
</template>

<style lang="scss" scoped>
@use '@/styles/vars';
.footertopbox {
  background-color:#E24737;
  width:100%;
  .footertopbodybox{
    width:85%;
    margin:0 auto;
    padding-top:76px;
    padding-bottom:89px;
    .logobox{
      width:66px;
      height:66px;
      
      img{
        width:66px;
        height:66px; 
      }
    }
    ul,p{
      list-style:none;
      margin:0;
      padding:0;
    }
    .footertoplistgroup{
      display: flex;
      flex-direction: row;
      margin-top:40px;
      >li{
        flex:1;
        a{
          font-weight: 400;
          font-size: 16px;
          color: #919191;
          line-height: 24px;
          text-align: left;
          font-style: normal;
          text-transform: none;
          text-decoration: none;
        }
        ul{
          li{
            margin-top:30px;
            a{
              display: inline-block;
              font-weight: 400;
              font-size: 16px;
              color: #FFFFFF;
              line-height: 24px;
              text-align: left;
              font-style: normal;
              text-transform: none;
              text-decoration: none;
            }
          }
        }
      }
      >li:nth-child(2){
            text-align: center;
          }
          >li:nth-child(3){
            text-align: center;
          }
      >li:last-child{
            text-align: right;
          }
    }
    @media screen and (max-width: 1200px) {
    /* 当屏幕宽度小于或等于 768px 时应用的样式 */
      .footertoplistgroup {
        display: flex;
        flex-direction: row;
        flex-wrap: wrap;
        >li{
          width:50%;
          flex:none;
        }
        
        >li:nth-child(2){
          text-align: right;
          ul{
            display: flex;
            flex-direction: column;
            align-items: flex-end;
          }
        }
        >li:nth-child(3){
          text-align: left;
          margin-top:40px;
          ul{
            display: flex;
            flex-direction: column;
            align-items: flex-start;
          }
        }
        >li:nth-child(4){
          text-align: right;
          margin-top:40px;
          ul{
            display: flex;
            flex-direction: column;
            align-items: flex-end;
          }
        }
      }
    }
  }
  .footertopdibubox{

  }
  h3{
    margin:0;
  }
}
.footerbottombox{
  background: #170102;
  display: flex;
  flex-direction: column;
  padding-bottom:60px;
  padding-top:50px;
  >div{
    width:85%;
    margin:0 auto;
  }
  p{
    margin:0;
  }
  .title{
    font-size:14px;
    font-weight:600;
    color:#fff;
    padding-top:10px;
  }

  .desc{
    font-size:14px;
    font-weight:400;
    color:#999;
    margin-top:10px;

    span{
      font-size:14px;
      font-weight:600;
      color:#fff;
    }
  }
  // p{
   
  //   font-weight: 400;
  //   font-size: 16px;
  //   color: #FFFFFF;
  //   line-height: 24px;
  //   text-align: left;
  //   font-style: normal;
  //   text-transform: none;
  // }
}
</style>
